<template>
  <div class="box">
    <div class="index">
      <span class="job">
        <h1 class="jobs">{{ recruit.jobs }}</h1>
        <span class="salary">{{ recruit.salary }}</span>
        <p>
          <a class="placename">{{ recruit.placename }}</a>
          <a class="split">|</a>
          <a class="eduname">{{ recruit.eduname }}</a>
          <a class="split">|</a>
          <a class="eduname">{{recruit.place}}</a>
        </p>
      </span>
      <span class="userbtn">
        <el-button
          type="primary"
          v-if="collectflag == true"
          @click="cancelcollection"
          plain
          >取消收藏</el-button
        >
        <el-button type="primary" v-else @click="collect" plain>收藏</el-button>
        <el-button type="primary" v-if="sendflag == true"  plain>已投简历</el-button>
        <el-button type="primary" v-else @click="dialogVisible = true" plain>投递简历</el-button>
      </span>
    </div>
    <div class="box1">
      <div class="userpic">
        <el-avatar
          :size="50"
          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
        ></el-avatar>
      </div>
      <div class="box2">
        <div class="principal">
          <span>{{ company.principal }}</span>
        </div>
        <div class="relation">
          <span class="phone">联系电话：{{ company.phone }}</span>
          <span class="email">联系邮箱：{{ company.email }}</span>
        </div>
      </div>
    </div>
    <div class="box3">
      <div class="requirements" :data="recruit">
        <span>岗位要求:</span>
        <a class="catename">{{ recruit.catename }}</a>

        <p class="jobrequirements" v-html="recruit.jobrequirements">
        </p>
      </div>
      <div class="company">
        <span>公司信息</span>
        <div class="company1">
          <span class="companypic">
            <img
              :src="'http://120.48.37.120:9000/parttime/' + company.companypic"
            />
          </span>
          
          <a
            class="attention"
            v-if="attentionflag == true"
            href="javascript:void(0)"
            @click="cancelattention"
            >取消关注</a
          >
          <a class="attention" v-else href="javascript:void(0)" @click="attention"
            >关注</a
          >
        </div>
        <div class="company2">
          <span class="companyname">{{ company.companyname }}</span>
          <span>在招职位<a id="number">&nbsp;&nbsp;{{this.total}}&nbsp;&nbsp;</a>个</span>
          <span class="comadvantage">{{ company.comadvantage }}</span>
        </div>
        <div class="btn">
          <el-button type="info" plain @click="companyDetail(company.id)">公司主页</el-button>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="box4">
      <Map/>    
    </div>

    <el-dialog
    ref="addFormRef"
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>这是一段信息</span>
        <el-upload
            class="upload-demo"
            drag
            :action="uploadURL"
            name="File"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="send">确 定</el-button>
        </span>
    </el-dialog>
  </div>
  

</template>

<script>
import Map from './map.vue'


export default {
  name: 'RecruitDetail',
  components: { 
    Map
    },
  data() {
      let self = this;
    return {
      recruit: {},
      company: {},
      user: {},
      attentionflag: '',
      collectflag: '',
      sendflag: '',
      
      dialogVisible:false,
      autoUpload:true,//自动上传
      fileUrl: '',//模型数据，用于上传图片完成后图片预览
      // 上传图片的URL地址
      uploadURL: 'http://localhost:8787/apply/upload',
      resume:'',
      searchForm: {
        querystring: '',
        pagenum: 1,
        pagesize: 3,
        cateids: '',
        placeids: '',
        eduid: '',
      }, //搜索选项
      total:'',
      //地图
      
    }
  },
  created() {
    this.getRecruitById()
  },
  methods: {

    async getRecruitById() {
      this.user = JSON.parse(window.sessionStorage.getItem('user'))
      let id = window.sessionStorage.getItem('Recruitid')
      const { data: res } = await this.$http.get('recruit/' + id)
      if (res.meta.status != 200) {
        return this.$message.error(res.meta.msg)
      }
      this.recruit = res.data
      this.getCompanyById()
      this.ifattention()
      this.ifcollect()
      this.ifsend()
    },
    async getCompanyById() {
      const { data: res } = await this.$http.get(
        'getCompanyByCompanyid?companyid=' + this.recruit.companyid
      )
      if (res.meta.status != 200) {
        return this.$message.error(res.meta.msg)
      }
      this.company = res.data
      this.getrecruitlist()
    },
    //获取岗位信息
    async getrecruitlist() {
      const { data: res } = await this.$http.get('SearchRecruidByComId/'+this.company.id, {
        params: this.searchForm,
      })
      if (res.meta.status != 200) return this.$message.error(res.meta.msg)
      this.recruitlist = res.data.records
      this.total = res.data.total
    },
    //是否关注企业
    async ifattention() {
        
      const { data: res } = await this.$http.get(
        '/IfAttention?companyid=' +
          this.recruit.companyid +
          '&&username=' +
          this.user.username
      )
      if (res.meta.status != 200) {
        this.attentionflag = false
      } else {
        this.attentionflag = true
      }
    },
    //关注企业
    async attention() {
      const { data: res } =await this.$http.get(
        '/AddAttention?companyid=' +
          this.recruit.companyid +
          '&&username=' +
          this.user.username
      )
      if (res.meta.status != 200) return this.$message.error(res.meta.msg)
      this.$message.success(res.meta.msg)
      this.getRecruitById()
    },
    //取消关注企业
    async cancelattention() {
      const { data: res } =await this.$http.get(
        '/DeleteAttention?companyid=' +
          this.recruit.companyid +
          '&&username=' +
          this.user.username
      )
      if (res.meta.status != 200) return this.$message.error(res.meta.msg)
      this.$message.success(res.meta.msg)
      this.getRecruitById()
    },

    //是否收藏
    async ifcollect() {
      const { data: res } =await this.$http.get(
        '/IfCollect?recruitid=' +
          this.recruit.id +
          '&&username=' +
          this.user.username
      )
      if (res.meta.status != 200) {
        this.collectflag = false
      } else {
        this.collectflag = true
      }
      
    },
    //收藏
    async collect() {
      const { data: res } =await this.$http.get(
        '/AddCollect?recruitid=' +
          this.recruit.id +
          '&&username=' +
          this.user.username
      )
      if (res.meta.status != 200) return this.$message.error(res.meta.msg)
      this.$message.success(res.meta.msg)
      this.getRecruitById()
    },
    //取消收藏
    async cancelcollection() {
      const { data: res } =await this.$http.get(
        '/DeleteCollect?recruitid=' +
          this.recruit.id +
          '&&username=' +
          this.user.username
      )
      if (res.meta.status != 200) return this.$message.error(res.meta.msg)
      this.$message.success(res.meta.msg)
      this.getRecruitById()
    },

    //文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
    handleAvatarSuccess(response, file) {
        //为模型数据fileUrl赋值 用于图片预览
        console.log(response.data)
        this.fileUrl="http://120.48.37.120:9000/parttime/"+response.data;
        if(response.meta.status!=200){
            this.$message.error('上传轮播图失败')
        }
        this.$message.success('上传轮播图成功')
        //设置模型数据（图片名称），后续提交ajax请求时会提交到后台最终保存到数据库
        this.resume= response.data;
    },
    //上传图片之前执行
    beforeAvatarUpload(file) {
        const isLt200M = file.size / 1024 / 1024 < 200;
        if (!isLt200M) {
        this.$message.error('上传套餐图片大小不能超过 200MB!');
        }
        return isLt200M;
    },
    //监听添加轮播图对话框的关闭事件
    handleClose(){
        this.$refs.addFormRef.resetFields()

    },

    //投递简历
    async send() {
      const { data: res } =await this.$http.get(
        '/Addapply?recruitid=' +
          this.recruit.id +
          '&&username=' +
          this.user.username+"&&resume="+this.resume
      )
      if (res.meta.status != 200) return this.$message.error(res.meta.msg)
      this.dialogVisible = false
      this.$message.success(res.meta.msg)
      this.getRecruitById()
    },
    //是否简历
    async ifsend() {
      const { data: res } =await this.$http.get(
        '/IfApply?recruitid=' +
          this.recruit.id +
          '&&username=' +
          this.user.username
      )
      if (res.meta.status != 200) {
        this.sendflag = false
      } else {
        this.sendflag = true
      }
    },
    companyDetail(id){
      window.sessionStorage.setItem("comid",id)
      this.$router.push("/CompanyDetail")
    },
    
  },
}
</script>

<style lang="less" scoped>
.box {
  margin: 0 auto;
  width: 80%;

  padding: 20px;
}
.index {
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 20px;
  height: 230px;
  .job {
    height: 210px;
    width: 500px;
    display: inline-block;
    margin: 10px 0 0 10px;
  }
  .jobs {
    font-size: 40px;
    font-weight: 900;
    margin: 20px 0 10px 20px;
    display: inline-block;
  }
  .salary {
    display: inline-block;
    color: #fa6a43;
    height: 42px;
    font-size: 32px;
    line-height: 42px;
    font-weight: 600;
    margin: 10px 0 10px 20px;
  }
  p > a {
    font-size: 20px;
    height: 24px;
  }
  .placename {
    margin-left: 24px;
  }
  .split {
    display: inline-block;
    width: 1px;
    margin: 0 12px;
    color: #f0f3f7;
  }
  .userbtn {
    height: 100px;
    float: right;
    margin: 50px 6% 0 0;
    .el-button {
      font-size: 30px;
      margin-right: 25px;
    }
  }
}

.box1 {
  display: block;
  margin-bottom: 20px;
  background-color: #fff;
  padding-bottom: 20px;
  height: 100px;
  border-radius: 20px;

  .userpic {
    float: left;
    margin: 10px;
    border-radius: 20px;
    width: 60px;
    height: 60px;
    line-height: 140px;
  }

  .box2 {
    margin-left: 20px;
    float: left;
    font-size: 20px;
    height: 100px;
    line-height: 100px;
    > span {
      display: block;
    }
    .principal {
      float: left;
      width: 120px;
      height: 120px;
      line-height: 120px;
      font-size: 25px;
    }
    .relation {
      float: left;
      height: 120px;
      line-height: 120px;
      > span {
        margin-right: 20px;
      }
    }
  }
}
.box3 {
  width: 100%;
  height: 500px;
  margin: 0 auto;
  display: block;
  .requirements {
    width: 55%;
    background-color: #fff;
    float: left;
    margin-right: 20px;
    border-radius: 20px;

    span {
      display: block;
      width: 160px;
      height: 50px;
      padding: 20px;
      font-size: 30px;
      font-weight: 700;
    }
    .catename {
      margin-left: 20px;
      width: 70px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background-color: #f8f9fb;
      color: #999999;
      display: block;
    }
    > p {
      padding: 20px;
      height: 300px;
    }
  }
  .company {
    border-radius: 20px;
    float: left;
    width: 43%;
    background-color: #fff;
    height: 493px;
    > span {
      display: block;
      width: 160px;
      height: 50px;
      padding: 20px;
      font-size: 30px;
      font-weight: 700;
    }
    .companypic {
      margin-left: 20px;
      width: 20%;
      height: 125px;
      margin-top: 15px;
      float: left;
    }
    img {
      width: 100%;
      height: 100%;
    }
    .company1 {
      height: 155px;
      .attention {
        line-height: 155px;
        margin: 0 0 0 30px;
        color: #ff6400;
        font-weight: 900;
        text-decoration: none;
        font-size: 23px;
      }
    }

    .company2 {
      margin-top: 50px;
      margin-left: 20px;
      height: 145px;
      > span {
        font-size: 18px;
        display: block;
        color: #666666;
        margin: 10px;
        #number {
          font-size: 18px;
          color: #ff6400;
        }
      }
      .companyname {
        font-size: 20px;
        margin-bottom: 20px;
        font-weight: 600;
        color: black;
      }
      .comadvantage {
        background-color: #f6f7f8;
        padding: 5px 10px 5px 10px;
        color: #666666;
        font-size: 17px;
        margin: 12px 0 10px 6px;
        float: left;
        border-radius: 10px;
      }
    }
    .btn {
      width: 110px;
      height: 50px;
      margin: 0 auto;
    }
  }
}
.box4{
  display: block;
  height: 465px;
  width: 70%;
  padding: 20px 15% 20px 15%;
  border-radius: 20px;
  margin: 0 auto;
  background-color: #fff;
}
//地图
.search-box {
  display: block;
  margin-top: 6px;
  width: 100%;
}
.search-box input {
  padding: 0 15px;
  width: 100%;
  height: 32px;
  line-height: 32px;
  color: #606266;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
.search-box input:focus {
  border-color: #409eff;
  outline: 0;
}
.search-box input::-webkit-input-placeholder {
  color: #c0c4cc;
}
.tip-box {
  width: 100%;
  max-height:280px;
  position: absolute;
  top: 72px;
  z-index: 10000;
  overflow-y: auto;
  background-color: #fff;
}
.amap-ui-poi-picker-sugg,
.amap_lib_placeSearch {
  border: 1px solid #eee;
  border-radius: 4px;
}
.amap-box {
  height: 350px;
}
</style>